<script>
  import HeaderMenu from './components/HeaderMenu.vue';
  import ShowNote from './components/ShowNote.vue';
  import SideMenu from './components/SideMenu.vue';
  export default {
    components:{
      HeaderMenu,SideMenu,ShowNote
    }
  }
  
</script>
<template>
  <el-container>
    <!-- 头部菜单 -->
    <el-header height="80px" style="padding: 0;">
      <HeaderMenu />
    </el-header>
    <!-- 侧边菜单 -->
    <el-container>
      <el-aside width="100px">
        <SideMenu/>
      </el-aside>
      <el-main style="padding: 0;">
        <ShowNote />
      </el-main>
      
    </el-container>
    
  </el-container>
  
</template>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .el-header{
    background-color: gray;
  }
  .el-aside{
    background-color: rgb(37, 59, 70);
    height: calc(100vh - 80px);
  }
  .el-main{
    background-color: rgba(4, 145, 126, 0.315);
  }
  .showIf{
    width: 100%;
    height: 100%;
  }
</style>